<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一体化作战平台 - 需求看板</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF',
                        secondary: '#f7fafc',
                        success: '#38a169',
                        warning: '#d69e2e',
                        danger: '#e53e3e',
                        info: '#3182ce',
                        'border-color': '#e2e8f0',
                        'text-primary': '#2d3748',
                        'text-secondary': '#718096'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }
            .badge-priority-high {
                @apply bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-priority-medium {
                @apply bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-priority-low {
                @apply bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-progress {
                @apply bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-blocked {
                @apply bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-completed {
                @apply bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-pending {
                @apply bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-overdue {
                @apply bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full;
            }
        }
    </style>
    <style>
        /* 基础样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
        /* 任务卡片悬停效果 */
        .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        /* 平滑过渡效果 */
        .task-card {
            transition: all 0.2s ease;
        }
        
        /* 弹窗优化样式 */
        #task-detail-modal {
            backdrop-filter: blur(2px);
        }
        
        #task-detail-modal > div {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.3s ease-out;
        }
        
        #task-detail-modal.hidden > div {
            transform: translateY(-20px);
            opacity: 0;
        }
        
        /* 确保弹窗内容完全可见 */
        #task-detail-modal .max-h-\[90vh\] {
            max-height: 85vh !important;
            margin: 2.5vh auto;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <script>
        // 阶段折叠/展开功能
        function togglePhase(phaseId) {
            const phaseContent = document.getElementById(phaseId);
            const phaseIcon = document.getElementById(phaseId + '-icon');
            
            if (phaseContent && phaseIcon) {
                if (phaseContent.classList.contains('hidden')) {
                    // 展开
                    phaseContent.classList.remove('hidden');
                    phaseIcon.classList.add('fa-chevron-down');
                    phaseIcon.classList.remove('fa-chevron-right');
                } else {
                    // 折叠
                    phaseContent.classList.add('hidden');
                    phaseIcon.classList.add('fa-chevron-right');
                    phaseIcon.classList.remove('fa-chevron-down');
                }
            }
        }
    </script>
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="container mx-auto px-4 py-2 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="bg-white rounded-full p-1 mr-2">
                    <i class="fa fa-shield text-primary"></i>
                </div>
                <h1 class="text-lg font-bold">一体化作战平台</h1>
            </div>
            <div class="flex items-center space-x-6">
                <div class="relative">
                    <button class="text-white hover:text-blue-200 relative">
                        <i class="fa fa-bell text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">2</span>
                    </button>
                </div>
                <div class="relative">
                    <button class="text-white hover:text-blue-200 relative">
                        <i class="fa fa-envelope text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-green-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">1</span>
                    </button>
                </div>
                <div class="flex items-center">
                    <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-blue-300">
                    <span class="ml-2 hidden md:inline-block">张三</span>
                    <i class="fa fa-angle-down ml-1 text-xs"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 二级导航 -->
    <div class="bg-white border-b border-border-color py-2 px-4">
        <div class="container mx-auto">
            <div class="flex items-center space-x-2">
                <a href="index.html" class="text-gray-600 hover:text-primary text-sm">首页</a>
                <span class="text-gray-400">></span>
                <span class="text-primary font-medium text-sm">团队看板</span>
                <div class="ml-auto flex items-center space-x-3">
                    <div class="hidden md:flex items-center space-x-4">
                    </div>
                    <button class="hidden md:flex items-center space-x-1 text-sm text-gray-500">
                        <i class="fa fa-refresh"></i>
                        <span>刷新</span>
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- 筛选区域 -->
    <div class="bg-white border-b border-border-color py-3 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
                <div class="flex flex-wrap items-center gap-3">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">来源</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>产品需求</option>
                            <option>技术优化</option>
                            <option>客户反馈</option>
                            <option>缺陷修复</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">负责人</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>张三</option>
                            <option>李四</option>
                            <option>王五</option>
                            <option>赵六</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs text-gray-500 mb-1">类型</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>功能</option>
                            <option>性能</option>
                            <option>安全</option>
                            <option>文档</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">优先级</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>高</option>
                            <option>中</option>
                            <option>低</option>
                        </select>
                    </div>
                </div>
                <div class="ml-auto flex items-center space-x-2">
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm">
                        <i class="fa fa-filter mr-1"></i> 筛选
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm">
                        <i class="fa fa-sliders mr-1"></i> 排序
                    </button>
                    <div class="relative">
                        <input type="text" placeholder="搜索需求ID或标题" class="border border-gray-300 rounded px-3 py-1 text-sm pl-8 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 看板主体内容 -->
    <main class="flex-1 p-4 overflow-x-auto">
        <div class="container mx-auto min-w-[1200px]">
            <!-- 看板表格 -->
            <div class="grid grid-cols-5 gap-4 min-h-[600px]">
                <!-- 业务需求列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>业务需求</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">1</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 业务需求卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">用户管理系统重构</h3>
                                <span class="badge-status-progress">进行中</span>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: RE_0001_01</span>
                                    <span>提出人: 张三</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                    <span>2024-07-15</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-3 line-clamp-2">
                                重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                提出日期: 2024-07-15
                            </div>
                            <div class="text-xs text-text-secondary mb-2">
                                期望上线日期: 2024-08-30
                            </div>
                            <div class="flex justify-between items-center">
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2">
                                    <div class="bg-green-500 h-1.5 rounded-full" style="width: 30%"></div>
                                </div>
                                <span class="text-xs text-text-secondary whitespace-nowrap">30%</span>
                            </div>
                            <div class="text-xs text-text-secondary mt-1">
                                3/10 任务完成
                            </div>
                            <!-- 新建任务按钮 -->
                            <button class="w-full mt-3 bg-primary text-white py-2 px-4 rounded-lg text-sm hover:bg-primary/90 flex items-center justify-center">
                                <i class="fa fa-plus mr-1"></i> 新建任务
                            </button>
                        </div>


                    </div>
                </div>

                <!-- 待开始列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>待开始</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">3</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">需求总体分析</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-051</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                        
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-15
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">业务架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-052</span>
                                    <span>负责人: 刘一</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                              
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-20
                            </div>
                        </div>

                        <!-- 任务卡片3 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">解决方案评审</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-053</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-low">优先级: 低</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-25
                            </div>
                        </div>
                        
                        <!-- 任务卡片4 - 编码开发 -->
                        <div id="coding-task-card" class="border border-border-color rounded-lg p-3 bg-white task-card relative cursor-pointer hover:border-primary">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">编码开发</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-999</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                实现编码开发自动化，代码提交自动触发代码扫描、构建、部署、测试的自动化流程。
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2026-08-30
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 进行中列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>进行中</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">2</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">测试策略设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-054</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                开发用户登录功能，包括密码验证、记住密码、忘记密码等功能，并确保安全性。
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                进度: 75%
                            </div>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-10
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">产品模型设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-055</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                         
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                进度: 30%
                            </div>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-12
                            </div>
                        </div>

                        <!-- 任务卡片3 - 系统测试任务 -->
                        <div id="system-test-task-card" class="border border-border-color rounded-lg p-3 bg-white task-card relative cursor-pointer hover:border-primary">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">系统测试任务</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-100</span>
                                    <span>负责人: 赵六</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                执行系统测试，验证新功能是否符合需求，确保系统稳定性和可靠性。
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                进度: 50%
                            </div>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-20
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 阻塞中列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>阻塞中</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">2</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">技术架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-056</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-05
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">安全架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-057</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-05
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 已完成列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>已完成</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">3</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">业务架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-048</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-success">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">系统架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-049</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                            
                            </p>
                            <div class="text-xs text-success">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </div>
                        </div>

                        <!-- 任务卡片3 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">产品模型设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-050</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-low">优先级: 低</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-success">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-border-color py-2 px-4 text-center text-xs text-text-secondary">
    </footer>

    <!-- JavaScript -->
    <script>
        // 搜索功能
        const searchInput = document.querySelector('input[placeholder="搜索需求ID或标题"]');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                console.log('Searching for:', searchTerm);
                // 这里可以添加搜索过滤逻辑
            });
        }

        // 筛选条件变更
        document.querySelectorAll('select').forEach(select => {
            select.addEventListener('change', (e) => {
                console.log('Filter changed:', e.target.previousElementSibling.textContent, e.target.value);
                // 这里可以添加筛选逻辑
            });
        });

        // 确保DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 任务详情弹窗功能
            const taskCards = document.querySelectorAll('.task-card');
            const taskModal = document.getElementById('task-detail-modal');
            const closeModal = document.getElementById('close-modal');
            const modalOverlay = document.getElementById('modal-overlay');

            // 关闭弹窗函数
            function hideModal() {
                if (taskModal) taskModal.classList.add('hidden');
                if (modalOverlay) modalOverlay.classList.add('hidden');
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            }

            // 显示弹窗函数
            function showModal() {
                if (taskModal) taskModal.classList.remove('hidden');
                if (modalOverlay) modalOverlay.classList.remove('hidden');
                document.body.style.overflow = 'hidden'; // 阻止背景滚动
            }

            // 点击任务卡片显示弹窗
            if (taskCards.length > 0 && taskModal && modalOverlay) {
                taskCards.forEach(card => {
                    // 为普通任务卡片添加cursor-pointer样式
                    if (!card.id || (card.id !== 'coding-task-card' && card.id !== 'system-test-task-card')) {
                        card.classList.add('cursor-pointer');
                        card.classList.add('hover:border-primary');
                        card.classList.add('transition-all');
                    }
                    
                    card.addEventListener('click', (e) => {
                        // 如果是特殊任务卡片，不处理（它们有自己的处理逻辑）
                        if (card.id === 'coding-task-card' || card.id === 'system-test-task-card') {
                            return;
                        }
                        
                        // 阻止新建任务按钮的冒泡
                        if (e.target.closest('button') && e.target.closest('button').textContent.includes('新建任务')) {
                            return;
                        }
                        
                        // 获取任务信息
                        const taskTitle = card.querySelector('h3')?.textContent || '任务详情';
                        const taskIdElement = card.querySelector('.text-sm.text-text-secondary .flex.justify-between span:first-child');
                        const taskOwnerElement = card.querySelector('.text-sm.text-text-secondary .flex.justify-between span:last-child');
                        const taskPriorityElement = card.querySelector('.badge-priority-high, .badge-priority-medium, .badge-priority-low');
                        const taskDeadlineElement = card.querySelector('.text-xs.text-text-secondary:last-child');
                        // const taskProgressElement = card.querySelector('.bg-gray-200.rounded-full.h-1.5 + span');
                        
                        const taskId = taskIdElement ? taskIdElement.textContent : 'ID: 未知';
                        const taskOwner = taskOwnerElement ? taskOwnerElement.textContent : '负责人: 未知';
                        const taskPriority = taskPriorityElement ? taskPriorityElement.textContent : '优先级: 未知';
                        const taskDeadline = taskDeadlineElement ? taskDeadlineElement.textContent : '截止日期: 未知';
                        // const taskProgress = taskProgressElement ? taskProgressElement.textContent : '0%';
                        
                        // 设置弹窗内容
                        const modalTitleElement = document.getElementById('modal-task-title');
                        const modalIdElement = document.getElementById('modal-task-id');
                        const modalOwnerElement = document.getElementById('modal-task-owner');
                        const modalPriorityElement = document.getElementById('modal-task-priority');
                        const modalDeadlineElement = document.getElementById('modal-task-deadline');
                        
                        // 设置弹窗标题和内容
                        if (modalTitleElement) modalTitleElement.textContent = taskTitle;
                        if (modalIdElement) modalIdElement.textContent = taskId;
                        if (modalOwnerElement) modalOwnerElement.textContent = taskOwner;
                        if (modalPriorityElement) modalPriorityElement.textContent = taskPriority;
                        if (modalDeadlineElement) modalDeadlineElement.textContent = taskDeadline;
                        
                        // 根据任务进度更新进展条
                        const progressPercentage = parseInt(100) || 0;
                        const progressBar = document.querySelector('.progress-node.active .progress-bar');
                        if (progressBar) {
                            progressBar.style.width = progressPercentage + '%';
                        }
                        
                        // 显示弹窗
                        showModal();
                    });
                });
            }

            // 关闭弹窗事件监听
            if (closeModal) {
                closeModal.addEventListener('click', hideModal);
            }

            if (modalOverlay) {
                modalOverlay.addEventListener('click', hideModal);
            }

            // 按ESC键关闭弹窗
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && taskModal && !taskModal.classList.contains('hidden')) {
                    hideModal();
                }
                if (e.key === 'Escape' && batchTaskModal && !batchTaskModal.classList.contains('hidden')) {
                    hideBatchTaskModal();
                }
            });

            // 为弹窗取消按钮添加点击事件
            const modalCancelBtn = document.getElementById('modal-cancel-btn');
            if (modalCancelBtn) {
                modalCancelBtn.addEventListener('click', hideModal);
            }

            // 批量创建任务弹窗功能
            const newTaskButtons = document.querySelectorAll('button:has(i.fa-plus)');
            const batchTaskModal = document.getElementById('batch-task-modal');
            const closeBatchTaskModal = document.getElementById('close-batch-modal');
            const batchSubmitBtn = document.getElementById('batch-submit-btn');
            const batchCancelBtn = document.getElementById('batch-cancel-btn');
            const selectAllCheckbox = document.getElementById('select-all-tasks');
            const taskCheckboxes = document.querySelectorAll('.task-checkbox');

            // 关闭批量任务弹窗函数
            function hideBatchTaskModal() {
                if (batchTaskModal) batchTaskModal.classList.add('hidden');
                if (modalOverlay) modalOverlay.classList.add('hidden');
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            }

            // 显示批量任务弹窗函数
            function showBatchTaskModal() {
                if (batchTaskModal) batchTaskModal.classList.remove('hidden');
                if (modalOverlay) modalOverlay.classList.remove('hidden');
                document.body.style.overflow = 'hidden'; // 阻止背景滚动
            }

            // 全选/取消全选功能
            if (selectAllCheckbox && taskCheckboxes.length > 0) {
                selectAllCheckbox.addEventListener('change', function() {
                    taskCheckboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                });
            }

            // 阶段全选功能
            const phaseSelectAllCheckboxes = document.querySelectorAll('.phase-select-all');
            phaseSelectAllCheckboxes.forEach(phaseCheckbox => {
                phaseCheckbox.addEventListener('change', function(e) {
                    e.stopPropagation();
                    const phaseId = this.getAttribute('data-phase');
                    const phaseTaskCheckboxes = document.querySelectorAll(`.task-checkbox[data-phase="${phaseId}"]`);
                    phaseTaskCheckboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                });
            });

            // 为新建任务按钮添加点击事件
            if (newTaskButtons.length > 0) {
                newTaskButtons.forEach(button => {
                    button.addEventListener('click', showBatchTaskModal);
                });
            }

            // 关闭批量任务弹窗事件监听
            if (closeBatchTaskModal) {
                closeBatchTaskModal.addEventListener('click', hideBatchTaskModal);
            }

            if (modalOverlay) {
                modalOverlay.addEventListener('click', function(e) {
                    // 如果点击的是遮罩本身，而不是弹窗内容
                    if (e.target === this) {
                        if (batchTaskModal && !batchTaskModal.classList.contains('hidden')) {
                            hideBatchTaskModal();
                        } else if (taskModal && !taskModal.classList.contains('hidden')) {
                            hideModal();
                        }
                    }
                });
            }

            // 取消按钮点击事件
            if (batchCancelBtn) {
                batchCancelBtn.addEventListener('click', hideBatchTaskModal);
            }

            // 工艺任务数据定义
            const processPhases = {
                enterprise: [
                    { id: 'phase-strategy', name: '战略解析', color: 'cyan', count: 2, tasks: [
                        { name: '企业战略分析', assignee: '张三', priority: 'high' },
                        { name: '业务战略解析', assignee: '李四', priority: 'high' }
                    ]},
                    { id: 'phase-solution', name: '解决方案设计', color: 'blue', count: 4, tasks: [
                        { name: '总体分析任务', assignee: '张三', priority: 'high' },
                        { name: '业务架构设计', assignee: '李四', priority: 'high' },
                        { name: '数据架构设计', assignee: '王五', priority: 'medium' },
                        { name: '技术架构设计', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-application', name: '应用设计', color: 'green', count: 3, tasks: [
                        { name: '应用架构设计', assignee: '赵六', priority: 'high' },
                        { name: '安全架构设计', assignee: '张三', priority: 'high' },
                        { name: '原型界面设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-coding', name: '编码开发', color: 'purple', count: 5, tasks: [
                        { name: '数据库表结构设计', assignee: '王五', priority: 'high' },
                        { name: '后端API开发', assignee: '赵六', priority: 'high' },
                        { name: '业务逻辑实现', assignee: '张三', priority: 'high' },
                        { name: '前端页面开发', assignee: '张三', priority: 'high' },
                        { name: '数据库脚本开发', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-testing', name: '测试', color: 'orange', count: 4, tasks: [
                        { name: '单元测试编写', assignee: '李四', priority: 'high' },
                        { name: '集成测试执行', assignee: '赵六', priority: 'high' },
                        { name: '性能测试', assignee: '王五', priority: 'medium' },
                        { name: '用户验收测试', assignee: '张三', priority: 'medium' }
                    ]},
                    { id: 'phase-deploy', name: '投产', color: 'red', count: 3, tasks: [
                        { name: '部署准备', assignee: '王五', priority: 'high' },
                        { name: '系统上线', assignee: '赵六', priority: 'high' },
                        { name: '上线验证', assignee: '张三', priority: 'medium' }
                    ]}
                ],
                galaxy: [
                    { id: 'phase-requirement', name: '需求分析', color: 'indigo', count: 3, tasks: [
                        { name: '需求调研与收集', assignee: '张三', priority: 'high' },
                        { name: '需求分析与评审', assignee: '李四', priority: 'high' },
                        { name: '需求规格编写', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-app-analysis', name: '应用分析', color: 'cyan', count: 4, tasks: [
                        { name: '业务流程分析', assignee: '赵六', priority: 'high' },
                        { name: '应用功能拆分', assignee: '张三', priority: 'high' },
                        { name: '用例设计', assignee: '李四', priority: 'medium' },
                        { name: '界面原型设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-design', name: '系统设计', color: 'blue', count: 4, tasks: [
                        { name: '架构设计', assignee: '赵六', priority: 'high' },
                        { name: '数据库设计', assignee: '张三', priority: 'high' },
                        { name: '接口设计', assignee: '李四', priority: 'medium' },
                        { name: '安全设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-coding', name: '编码开发', color: 'purple', count: 5, tasks: [
                        { name: '数据库表结构设计', assignee: '王五', priority: 'high' },
                        { name: '后端API开发', assignee: '赵六', priority: 'high' },
                        { name: '业务逻辑实现', assignee: '张三', priority: 'high' },
                        { name: '前端页面开发', assignee: '张三', priority: 'high' },
                        { name: '数据库脚本开发', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-test', name: '测试', color: 'orange', count: 3, tasks: [
                        { name: '单元测试', assignee: '赵六', priority: 'high' },
                        { name: '集成测试', assignee: '张三', priority: 'high' },
                        { name: '系统测试', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-prod', name: '投产', color: 'red', count: 3, tasks: [
                        { name: '生产环境部署', assignee: '王五', priority: 'high' },
                        { name: '数据迁移', assignee: '赵六', priority: 'high' },
                        { name: '上线验证', assignee: '张三', priority: 'medium' }
                    ]}
                ],
                traditional: [
                    { id: 'phase-requirement-trad', name: '需求分析', color: 'indigo', count: 3, tasks: [
                        { name: '需求调研', assignee: '张三', priority: 'high' },
                        { name: '需求分析', assignee: '李四', priority: 'high' },
                        { name: '需求文档编写', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-design-trad', name: '概设详设', color: 'teal', count: 4, tasks: [
                        { name: '系统概要设计', assignee: '赵六', priority: 'high' },
                        { name: '系统详细设计', assignee: '张三', priority: 'high' },
                        { name: '数据库设计', assignee: '李四', priority: 'medium' },
                        { name: 'UI设计', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-dev-trad', name: '开发', color: 'purple', count: 4, tasks: [
                        { name: '编码实现', assignee: '赵六', priority: 'high' },
                        { name: '单元测试', assignee: '张三', priority: 'high' },
                        { name: '代码审查', assignee: '李四', priority: 'medium' },
                        { name: '文档编写', assignee: '王五', priority: 'medium' }
                    ]},
                    { id: 'phase-test-trad', name: '测试', color: 'orange', count: 3, tasks: [
                        { name: '功能测试', assignee: '赵六', priority: 'high' },
                        { name: '集成测试', assignee: '张三', priority: 'high' },
                        { name: '验收测试', assignee: '李四', priority: 'medium' }
                    ]},
                    { id: 'phase-deploy-trad', name: '投产', color: 'red', count: 3, tasks: [
                        { name: '部署准备', assignee: '王五', priority: 'high' },
                        { name: '系统上线', assignee: '赵六', priority: 'high' },
                        { name: '上线验证', assignee: '张三', priority: 'medium' }
                    ]}
                ]
            };

            // 生成阶段HTML
            function generatePhasesHTML(phases) {
                return phases.map((phase, index) => `
                    <div class="mb-3 border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gradient-to-r from-${phase.color}-50 to-${phase.color}-100 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-${phase.color}-100 transition-colors" onclick="togglePhase('${phase.id}')">
                            <div class="flex items-center space-x-3">
                                <i class="fa fa-chevron-right text-${phase.color}-600 transition-transform duration-200" id="${phase.id}-icon"></i>
                                <h3 class="font-semibold text-gray-800">${index + 1}. ${phase.name}阶段</h3>
                                <span class="bg-${phase.color}-500 text-white text-xs px-2 py-1 rounded-full">${phase.count}个任务</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="checkbox" class="phase-select-all rounded text-primary focus:ring-primary" data-phase="${phase.id}" onclick="event.stopPropagation()">
                                <span class="text-xs text-gray-600">全选</span>
                            </div>
                        </div>
                        <div id="${phase.id}" class="hidden">
                            <table class="min-w-full bg-white">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left w-12">
                                            <i class="fa fa-check-square-o text-gray-400"></i>
                                        </th>
                                        <th class="px-3 py-2 text-left">任务名称</th>
                                        <th class="px-3 py-2 text-left">默认负责人</th>
                                        <th class="px-3 py-2 text-left">优先级</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    ${phase.tasks.map((task, taskIndex) => `
                                        <tr class="${taskIndex < phase.tasks.length - 1 ? 'border-b border-gray-100' : ''} hover:bg-gray-50">
                                            <td class="px-3 py-3">
                                                <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="${phase.id}">
                                            </td>
                                            <td class="px-3 py-3 task-name">${task.name}</td>
                                            <td class="px-3 py-3">
                                                <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                    <option value="${task.assignee}">${task.assignee}</option>
                                                    <option value="张三">张三</option>
                                                    <option value="李四">李四</option>
                                                    <option value="王五">王五</option>
                                                    <option value="赵六">赵六</option>
                                                </select>
                                            </td>
                                            <td class="px-3 py-3"><span class="badge-priority-${task.priority}">${task.priority === 'high' ? '高' : task.priority === 'medium' ? '中' : '低'}</span></td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    </div>
                `).join('');
            }
            
            // 切换工艺任务
            function switchProcessType(type) {
                const phases = processPhases[type];
                const phasesContainer = document.getElementById('phases-container');
                if (phasesContainer && phases) {
                    phasesContainer.innerHTML = generatePhasesHTML(phases);
                    bindPhaseSelectAllEvents();
                }
            }
            
            // 绑定阶段全选事件
            function bindPhaseSelectAllEvents() {
                const phaseSelectAllCheckboxes = document.querySelectorAll('.phase-select-all');
                phaseSelectAllCheckboxes.forEach(phaseCheckbox => {
                    phaseCheckbox.addEventListener('change', function(e) {
                        e.stopPropagation();
                        const phaseId = this.getAttribute('data-phase');
                        const phaseTaskCheckboxes = document.querySelectorAll(`.task-checkbox[data-phase="${phaseId}"]`);
                        phaseTaskCheckboxes.forEach(checkbox => {
                            checkbox.checked = this.checked;
                        });
                    });
                });
            }

            // 监听工艺任务切换
            const processTypeRadios = document.querySelectorAll('.process-type-radio');
            processTypeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.checked) {
                        switchProcessType(this.value);
                    }
                });
            });

            // 标签页切换功能
            const presetTab = document.getElementById('preset-tab');
            const customTab = document.getElementById('custom-tab');
            const presetContent = document.getElementById('preset-content');
            const customContent = document.getElementById('custom-content');
            const submitButton = document.getElementById('batch-submit-btn');
            const submitText = document.getElementById('submit-text');
            
            if (presetTab && customTab) {
                presetTab.addEventListener('click', function() {
                    // 切换标签页样式
                    presetTab.classList.add('active', 'border-primary', 'text-primary');
                    presetTab.classList.remove('border-transparent', 'text-gray-600');
                    customTab.classList.remove('active', 'border-primary', 'text-primary');
                    customTab.classList.add('border-transparent', 'text-gray-600');
                    
                    // 切换内容显示
                    presetContent.classList.remove('hidden');
                    customContent.classList.add('hidden');
                    
                    // 更新提交按钮文本
                    submitText.textContent = '批量创建任务';
                });
                
                customTab.addEventListener('click', function() {
                    // 切换标签页样式
                    customTab.classList.add('active', 'border-primary', 'text-primary');
                    customTab.classList.remove('border-transparent', 'text-gray-600');
                    presetTab.classList.remove('active', 'border-primary', 'text-primary');
                    presetTab.classList.add('border-transparent', 'text-gray-600');
                    
                    // 切换内容显示
                    customContent.classList.remove('hidden');
                    presetContent.classList.add('hidden');
                    
                    // 更新提交按钮文本
                    submitText.textContent = '创建任务';
                });
            }

            // 提交按钮点击事件（处理预置任务和自定义任务）
            if (batchSubmitBtn) {
                batchSubmitBtn.addEventListener('click', function() {
                    // 判断当前是哪个标签页
                    if (!customContent.classList.contains('hidden')) {
                        // 自定义任务提交
                        const taskName = document.getElementById('task-name').value;
                        const taskDescription = document.getElementById('task-description').value;
                        const taskPhase = document.getElementById('task-phase').value;
                        const taskAssignee = document.getElementById('task-assignee').value;
                        const taskPriority = document.getElementById('task-priority').value;
                        const taskDeadline = document.getElementById('task-deadline').value;
                        const taskType = document.getElementById('task-type').value;
                        
                        // 验证必填字段
                        if (!taskName || !taskPhase || !taskAssignee) {
                            alert('请填写必填字段：任务名称、任务阶段、负责人');
                            return;
                        }
                        
                        // 创建任务对象
                        const newTask = {
                            name: taskName,
                            description: taskDescription,
                            phase: taskPhase,
                            assignee: taskAssignee,
                            priority: taskPriority,
                            deadline: taskDeadline,
                            type: taskType,
                            id: 'TASK-' + Date.now(),
                            status: '未开始'
                        };
                        
                        console.log('创建自定义任务:', newTask);
                        alert(`已成功创建任务：${taskName}`);
                        
                        // 清空表单
                        document.getElementById('custom-task-form').reset();
                        
                        // 关闭弹窗
                        hideBatchTaskModal();
                    } else {
                        // 预置任务批量创建
                        const selectedTasks = [];
                        const taskCheckboxes = document.querySelectorAll('.task-checkbox');
                        taskCheckboxes.forEach(checkbox => {
                            if (checkbox.checked) {
                                const taskRow = checkbox.closest('tr');
                                const taskName = taskRow.querySelector('.task-name').textContent;
                                const taskOwner = taskRow.querySelector('select').value;
                                const priorityBadge = taskRow.querySelector('[class*="badge-priority"]');
                                const priority = priorityBadge ? priorityBadge.textContent : '中';
                                const phaseId = checkbox.getAttribute('data-phase');
                                
                                selectedTasks.push({ 
                                    name: taskName, 
                                    owner: taskOwner, 
                                    priority: priority,
                                    phase: phaseId
                                });
                            }
                        });
                        
                        if (selectedTasks.length === 0) {
                            alert('请至少选择一个任务！');
                            return;
                        }
                        
                        console.log('批量创建任务:', selectedTasks);
                        alert(`已选择创建 ${selectedTasks.length} 个任务`);
                        
                        // 关闭弹窗
                        hideBatchTaskModal();
                    }
                });
            }

            // 初始化默认工艺任务（企架工艺）
            switchProcessType('enterprise');
        });
    </script>

    <!-- 遮罩层 -->
    <div id="modal-overlay" class="fixed inset-0 bg-black/50 z-50 hidden"></div>

    <!-- 批量创建任务弹窗 -->
    <div id="batch-task-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold">创建任务</h2>
                <button id="close-batch-modal" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <!-- 标签页切换 -->
            <div class="border-b border-gray-200">
                <div class="flex px-6">
                    <button id="preset-tab" class="tab-button active px-4 py-3 text-sm font-medium border-b-2 border-primary text-primary">
                        <i class="fa fa-list mr-1"></i> 预置任务
                    </button>
                    <button id="custom-tab" class="tab-button px-4 py-3 text-sm font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-800">
                        <i class="fa fa-plus-circle mr-1"></i> 自定义任务
                    </button>
                </div>
            </div>

            <!-- 弹窗内容 -->
            <div class="flex-1 overflow-y-auto">
                <!-- 预置任务内容 -->
                <div id="preset-content" class="tab-content p-6">
                    <!-- 工艺任务选择 -->
                    <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg border border-blue-200">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center">
                            <i class="fa fa-cog text-primary mr-2"></i>
                            选择工艺任务类型
                        </h3>
                        <div class="flex flex-wrap gap-4">
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="processType" value="enterprise" class="process-type-radio w-4 h-4 text-primary focus:ring-primary" checked>
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-building-o mr-1"></i>企架工艺任务
                                </span>
                            </label>
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="processType" value="galaxy" class="process-type-radio w-4 h-4 text-primary focus:ring-primary">
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-rocket mr-1"></i>银河工艺任务
                                </span>
                            </label>
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="processType" value="traditional" class="process-type-radio w-4 h-4 text-primary focus:ring-primary">
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-1"></i>传统工艺任务
                                </span>
                            </label>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            <i class="fa fa-info-circle mr-1"></i>
                            不同工艺任务对应不同的阶段划分，请根据项目需求选择合适的工艺类型
                        </p>
                    </div>

                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-4">请选择要创建的任务项，并为每个任务分配负责人。点击阶段标题可展开/折叠任务列表：</p>
                        
                        <!-- 动态阶段容器 -->
                        <div id="phases-container">
                    
                    <!-- 解决方案设计阶段 -->
                    <div class="mb-3 border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gradient-to-r from-blue-50 to-blue-100 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-blue-100 transition-colors" onclick="togglePhase('phase-solution')">
                            <div class="flex items-center space-x-3">
                                <i class="fa fa-chevron-right text-primary transition-transform duration-200" id="phase-solution-icon"></i>
                                <h3 class="font-semibold text-gray-800">1. 解决方案设计阶段</h3>
                                <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">4个任务</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="checkbox" class="phase-select-all rounded text-primary focus:ring-primary" data-phase="phase-solution" onclick="event.stopPropagation()">
                                <span class="text-xs text-gray-600">全选</span>
                            </div>
                        </div>
                        <div id="phase-solution" class="hidden">
                            <table class="min-w-full bg-white">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left w-12">
                                            <i class="fa fa-check-square-o text-gray-400"></i>
                                        </th>
                                        <th class="px-3 py-2 text-left">任务名称</th>
                                        <th class="px-3 py-2 text-left">默认负责人</th>
                                        <th class="px-3 py-2 text-left">优先级</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-solution">
                                        </td>
                                        <td class="px-3 py-3 task-name">总体分析任务</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-solution">
                                        </td>
                                        <td class="px-3 py-3 task-name">业务架构设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="李四">李四</option>
                                                <option value="张三">张三</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-solution">
                                        </td>
                                        <td class="px-3 py-3 task-name">数据架构设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="王五">王五</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-solution">
                                        </td>
                                        <td class="px-3 py-3 task-name">技术架构设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="李四">李四</option>
                                                <option value="张三">张三</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 应用设计阶段 -->
                    <div class="mb-3 border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gradient-to-r from-green-50 to-green-100 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-green-100 transition-colors" onclick="togglePhase('phase-application')">
                            <div class="flex items-center space-x-3">
                                <i class="fa fa-chevron-right text-success transition-transform duration-200" id="phase-application-icon"></i>
                                <h3 class="font-semibold text-gray-800">2. 应用设计阶段</h3>
                                <span class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">3个任务</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="checkbox" class="phase-select-all rounded text-primary focus:ring-primary" data-phase="phase-application" onclick="event.stopPropagation()">
                                <span class="text-xs text-gray-600">全选</span>
                            </div>
                        </div>
                        <div id="phase-application" class="hidden">
                            <table class="min-w-full bg-white">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left w-12">
                                            <i class="fa fa-check-square-o text-gray-400"></i>
                                        </th>
                                        <th class="px-3 py-2 text-left">任务名称</th>
                                        <th class="px-3 py-2 text-left">默认负责人</th>
                                        <th class="px-3 py-2 text-left">优先级</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-application">
                                        </td>
                                        <td class="px-3 py-3 task-name">应用架构设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="赵六">赵六</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-application">
                                        </td>
                                        <td class="px-3 py-3 task-name">安全架构设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-application">
                                        </td>
                                        <td class="px-3 py-3 task-name">原型界面设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="王五">王五</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 编码开发阶段 -->
                    <div class="mb-3 border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gradient-to-r from-purple-50 to-purple-100 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-purple-100 transition-colors" onclick="togglePhase('phase-coding')">
                            <div class="flex items-center space-x-3">
                                <i class="fa fa-chevron-right text-purple-600 transition-transform duration-200" id="phase-coding-icon"></i>
                                <h3 class="font-semibold text-gray-800">3. 编码开发阶段</h3>
                                <span class="bg-purple-500 text-white text-xs px-2 py-1 rounded-full">5个任务</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="checkbox" class="phase-select-all rounded text-primary focus:ring-primary" data-phase="phase-coding" onclick="event.stopPropagation()">
                                <span class="text-xs text-gray-600">全选</span>
                            </div>
                        </div>
                        <div id="phase-coding" class="hidden">
                            <table class="min-w-full bg-white">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left w-12">
                                            <i class="fa fa-check-square-o text-gray-400"></i>
                                        </th>
                                        <th class="px-3 py-2 text-left">任务名称</th>
                                        <th class="px-3 py-2 text-left">默认负责人</th>
                                        <th class="px-3 py-2 text-left">优先级</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-coding">
                                        </td>
                                        <td class="px-3 py-3 task-name">数据库表结构设计</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="王五">王五</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-coding">
                                        </td>
                                        <td class="px-3 py-3 task-name">后端API开发</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-coding">
                                        </td>
                                        <td class="px-3 py-3 task-name">前端页面开发</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="李四">李四</option>
                                                <option value="张三">张三</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-coding">
                                        </td>
                                        <td class="px-3 py-3 task-name">业务逻辑实现</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="赵六">赵六</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-coding">
                                        </td>
                                        <td class="px-3 py-3 task-name">接口联调测试</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 测试阶段 -->
                    <div class="mb-3 border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gradient-to-r from-orange-50 to-orange-100 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-orange-100 transition-colors" onclick="togglePhase('phase-testing')">
                            <div class="flex items-center space-x-3">
                                <i class="fa fa-chevron-right text-orange-600 transition-transform duration-200" id="phase-testing-icon"></i>
                                <h3 class="font-semibold text-gray-800">4. 测试阶段</h3>
                                <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded-full">4个任务</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <input type="checkbox" class="phase-select-all rounded text-primary focus:ring-primary" data-phase="phase-testing" onclick="event.stopPropagation()">
                                <span class="text-xs text-gray-600">全选</span>
                            </div>
                        </div>
                        <div id="phase-testing" class="hidden">
                            <table class="min-w-full bg-white">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left w-12">
                                            <i class="fa fa-check-square-o text-gray-400"></i>
                                        </th>
                                        <th class="px-3 py-2 text-left">任务名称</th>
                                        <th class="px-3 py-2 text-left">默认负责人</th>
                                        <th class="px-3 py-2 text-left">优先级</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-testing">
                                        </td>
                                        <td class="px-3 py-3 task-name">单元测试编写</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="李四">李四</option>
                                                <option value="张三">张三</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-testing">
                                        </td>
                                        <td class="px-3 py-3 task-name">集成测试执行</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="赵六">赵六</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-high">高</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-testing">
                                        </td>
                                        <td class="px-3 py-3 task-name">性能测试</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="王五">王五</option>
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-3">
                                            <input type="checkbox" class="task-checkbox rounded text-primary focus:ring-primary" data-phase="phase-testing">
                                        </td>
                                        <td class="px-3 py-3 task-name">用户验收测试</td>
                                        <td class="px-3 py-3">
                                            <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                                <option value="张三">张三</option>
                                                <option value="李四">李四</option>
                                                <option value="王五">王五</option>
                                                <option value="赵六">赵六</option>
                                            </select>
                                        </td>
                                        <td class="px-3 py-3"><span class="badge-priority-medium">中</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 自定义任务内容 -->
            <div id="custom-content" class="tab-content hidden p-6">
                <form id="custom-task-form">
                    <!-- 任务名称 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fa fa-tag text-primary mr-1"></i> 任务名称 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="task-name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入任务名称" required>
                    </div>

                    <!-- 任务描述 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fa fa-align-left text-primary mr-1"></i> 任务描述
                        </label>
                        <textarea id="task-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入任务描述（可选）"></textarea>
                    </div>

                    <!-- 任务阶段和负责人 -->
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-sitemap text-primary mr-1"></i> 任务阶段 <span class="text-red-500">*</span>
                            </label>
                            <select id="task-phase" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                                <option value="">请选择阶段</option>
                                <option value="战略解析">战略解析</option>
                                <option value="解决方案设计">解决方案设计</option>
                                <option value="应用设计">应用设计</option>
                                <option value="编码开发">编码开发</option>
                                <option value="测试验证">测试验证</option>
                                <option value="投产">投产</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-user text-primary mr-1"></i> 负责人 <span class="text-red-500">*</span>
                            </label>
                            <select id="task-assignee" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                                <option value="">请选择负责人</option>
                                <option value="张三">张三</option>
                                <option value="李四">李四</option>
                                <option value="王五">王五</option>
                                <option value="赵六">赵六</option>
                            </select>
                        </div>
                    </div>

                    <!-- 优先级和截止日期 -->
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-flag text-primary mr-1"></i> 优先级 <span class="text-red-500">*</span>
                            </label>
                            <select id="task-priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" required>
                                <option value="high">高</option>
                                <option value="medium" selected>中</option>
                                <option value="low">低</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fa fa-calendar text-primary mr-1"></i> 截止日期
                            </label>
                            <input type="date" id="task-deadline" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                        </div>
                    </div>

                    <!-- 任务类型 -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fa fa-tasks text-primary mr-1"></i> 任务类型
                        </label>
                        <select id="task-type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                            <option value="IPDO">IPDO任务</option>
                            <option value="普通">普通任务</option>
                            <option value="紧急">紧急任务</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
            <button id="batch-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                取消
            </button>
            <button id="batch-submit-btn" class="submit-button px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90">
                <i class="fa fa-check mr-1"></i> <span id="submit-text">批量创建任务</span>
            </button>
        </div>
    </div>
</div>

    <!-- 任务详情弹窗 -->
    <div id="task-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 z-60 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold" id="modal-task-title">业务架构设计</h2>
                <button id="close-modal" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 任务自动化进展 -->
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium mb-3">任务自动化进展</h3>
                <div class="relative">
                    <!-- 进展条背景 -->
                    <div class="absolute top-1/2 left-0 w-full h-0.5 bg-gray-200 -translate-y-1/2"></div>
                    
                    <!-- 节点和连接线 -->
                    <div class="flex justify-between relative z-10">
                        <!-- 需求分析节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-search"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">高阶流程模型</span>
                        </div>
                        
                        <!-- 方案设计节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">活动模型</span>
                        </div>
                        
                        <!-- 开发实施节点 -->
                        <div class="flex flex-col items-center progress-node active">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-code"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">业务组件模型</span>
                            <!-- 进度条 -->
                            <div class="absolute top-1/2 left-0 w-full h-0.5 bg-primary -translate-y-1/2 progress-bar" style="width: 70%"></div>
                        </div>
                        
                        <!-- 测试验证节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">任务步骤模型</span>
                        </div>
                        
                        <!-- 上线部署节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">模型验证</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务详情内容 -->
            <div class="flex-1 p-6 overflow-y-auto">
                <div class="mb-4">
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">任务ID</p>
                            <p class="text-sm font-medium" id="modal-task-id">ID: RE_0001_01</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">负责人</p>
                            <p class="text-sm font-medium" id="modal-task-owner">负责人: 张三</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">优先级</p>
                            <p class="text-sm font-medium" id="modal-task-priority">优先级: 高</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">截止日期</p>
                            <p class="text-sm font-medium" id="modal-task-deadline">截止日期: 2024-08-30</p>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">任务描述</p>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm">重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。</p>
                        </div>
                    </div>
                
                    <div class="mb-4">
                        <div class="mb-2">
                            <a href="baa_solution_process_selection_tab.html" class="text-primary hover:text-primary/80 text-sm">
                                <i class="fa fa-eye mr-1"></i> 查看解决方案整体信息
                            </a>
                        </div>
                        <p class="text-sm text-gray-500 mb-1">模型变更清单</p>
                        <div class="overflow-x-auto">
                            <table class="min-w-full bg-white rounded-lg overflow-hidden">
                                <thead class="bg-gray-50 text-gray-600 text-xs leading-normal">
                                    <tr>
                                        <th class="px-3 py-2 text-left">模型类型</th>
                                        <th class="px-3 py-2 text-left">模型名称</th>
                                        <th class="px-3 py-2 text-left">变更内容</th>
                                        <th class="px-3 py-2 text-left">变更状态</th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm">
                                    <tr class="border-b border-gray-100">
                                        <td class="px-3 py-2">业务流程模型</td>
                                        <td class="px-3 py-2">用户认证流程</td>
                                        <td class="px-3 py-2">新增多因素认证环节</td>
                                        <td class="px-3 py-2"><span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">已完成</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="px-3 py-2">应用架构模型</td>
                                        <td class="px-3 py-2">用户管理服务</td>
                                        <td class="px-3 py-2">API接口优化与权限控制重构</td>
                                        <td class="px-3 py-2"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">进行中</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="px-3 py-2">数据模型</td>
                                        <td class="px-3 py-2">用户数据表</td>
                                        <td class="px-3 py-2">字段扩展与索引优化</td>
                                        <td class="px-3 py-2"><span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">待开始</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">任务历史</p>
                        <div class="space-y-2">
                            <div class="flex items-start">
                                <div class="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                                <div class="text-sm">
                                    <span class="font-medium">张三</span> 更新了任务状态为 <span class="text-green-600">进行中</span> - 2024-08-01 10:30
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-2 h-2 rounded-full bg-blue-500 mt-1.5 mr-2"></div>
                                <div class="text-sm">
                                    <span class="font-medium">李四</span> 分配任务给 <span class="text-blue-600">张三</span> - 2024-07-30 15:45
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="modal-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    取消
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90">
                    确认
                </button>
            </div>
        </div>
    </div>
    
    <!-- 编码开发自动化流程模态框 -->
    <div id="coding-automation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <!-- 模态框头部 -->
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-text-primary">编码开发自动化</h3>
                <button id="close-coding-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-lg"></i>
                </button>
            </div>
            
            <!-- 任务基本信息 -->
            <div class="px-6 py-4">
                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-3">
                        <h4 class="text-lg font-medium text-text-primary">编码开发</h4>
                        <div class="flex items-center space-x-2 mt-2 md:mt-0">
                            <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            <span class="badge-priority-medium">优先级: 中</span>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">任务ID</p>
                            <p class="text-sm">TASK-2024-999</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">负责人</p>
                            <p class="text-sm">王五</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">截止日期</p>
                            <p class="text-sm">2026-08-30</p>
                        </div>
                    </div>
                </div>
                
                <!-- 模型版本信息 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-3">模型版本信息</h4>
                    <div class="space-y-2">
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">解决方案版本号:</span>
                            <span class="text-sm text-text-primary font-medium">Solution_900123_V1.0.1</span>
                        </div>
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">版本自动创建时间:</span>
                            <span class="text-sm text-text-primary">2025-10-09 12:12:12</span>
                        </div>
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">应用设计版本号:</span>
                            <span class="text-sm text-text-primary font-medium">AppDesign_900456_V0.0.7</span>
                        </div>
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">版本自动创建时间:</span>
                            <span class="text-sm text-text-primary">2025-10-15 10:12:12</span>
                        </div>
                    </div>
                </div>
                
                <!-- 模型变更分类统计 -->
                <div class="mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-4">模型变更分类统计</h4>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <!-- 工作流组件 -->
                            <div class="bg-white rounded-lg p-3 border border-border-color">
                                <div class="flex items-center justify-between mb-2">
                                    <h5 class="text-sm font-medium text-text-primary">工作流组件</h5>
                                    <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">8 个</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                                    <div class="bg-primary h-1.5 rounded-full" style="width: 100%"></div>
                                </div>
                                <p class="text-xs text-gray-500">8/8 已完成</p>
                            </div>
                            
                            <!-- 前端组件 -->
                            <div class="bg-white rounded-lg p-3 border border-border-color">
                                <div class="flex items-center justify-between mb-2">
                                    <h5 class="text-sm font-medium text-text-primary">前端组件</h5>
                                    <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">12 个</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                                    <div class="bg-primary h-1.5 rounded-full" style="width: 100%"></div>
                                </div>
                                <p class="text-xs text-gray-500">12/12 已完成</p>
                            </div>
                            
                            <!-- 后端组件 -->
                            <div class="bg-white rounded-lg p-3 border border-border-color">
                                <div class="flex items-center justify-between mb-2">
                                    <h5 class="text-sm font-medium text-text-primary">后端组件</h5>
                                    <span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded-full">10 个</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                                    <div class="bg-warning h-1.5 rounded-full" style="width: 80%"></div>
                                </div>
                                <p class="text-xs text-gray-500">8/10 已完成</p>
                            </div>
                            
                            <!-- 单元组件 -->
                            <div class="bg-white rounded-lg p-3 border border-border-color">
                                <div class="flex items-center justify-between mb-2">
                                    <h5 class="text-sm font-medium text-text-primary">单元组件</h5>
                                    <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded-full">5 个</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                                    <div class="bg-success h-1.5 rounded-full" style="width: 100%"></div>
                                </div>
                                <p class="text-xs text-gray-500">5/5 已完成</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 自动化流程进度 -->
                <div class="mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-4">自动化流程进度</h4>
                    
                    <!-- 水平流程时间线 -->
                    <div class="relative">
                        <div class="flex flex-wrap justify-between items-center">
                            <!-- 水平连接线 -->
                            <div class="absolute top-3 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
                            
                            <!-- 流程步骤1: 开始 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">开始</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤2: 质量扫描-静态规则集合 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">质量扫描-静态规则集合</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤3: 质量扫描-代码安全 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">质量扫描-代码安全</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤4: 质量扫描-开源组件漏洞 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">质量扫描-开源组件漏洞</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤5: 单元测试 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">单元测试</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤6: 构建 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">构建</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-11</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤7: 制品晋级 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">制品晋级</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-11</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤8: 测试环境部署 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-spinner fa-spin text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">测试环境部署</h5>
                                    <span class="text-xs text-primary">进行中</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-11</p>
                                    <div class="mt-1 w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-primary h-1.5 rounded-full" style="width: 75%"></div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-0.5">75%</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤9: 自动化测试 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-white mb-1">
                                    <span class="text-xs">9</span>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-gray-400 text-xs mb-0.5">自动化测试</h5>
                                    <span class="text-xs text-gray-400">未开始</span>
                                    <p class="text-xs text-gray-400 mt-0.5">待部署完成</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤10: 结束 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-white mb-1">
                                    <span class="text-xs">10</span>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-gray-400 text-xs mb-0.5">结束</h5>
                                    <span class="text-xs text-gray-400">未开始</span>
                                    <p class="text-xs text-gray-400 mt-0.5">待测试完成</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细日志 -->
                <div class="mb-4">
                    <h4 class="text-base font-medium text-text-primary mb-3">部署日志</h4>
                    <div class="bg-gray-50 rounded-lg p-3 max-h-40 overflow-y-auto text-sm text-gray-600 font-mono">
                        <p>[2024-08-11 14:00:00] 开始部署制品到测试环境...</p>
                        <p>[2024-08-11 14:01:30] 上传制品文件成功</p>
                        <p>[2024-08-11 14:03:45] 配置环境变量</p>
                        <p>[2024-08-11 14:05:20] 启动服务容器</p>
                        <p>[2024-08-11 14:07:10] 服务健康检查中...</p>
                        <p>[2024-08-11 14:08:30] 部署进度: 75% - 正在配置网络...</p>
                    </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="close-coding-modal-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    关闭
                </button>
            </div>
        </div>
    </div>
    
    <!-- 编码开发卡片点击事件JavaScript -->
    <script>
        // 为编码开发任务添加点击事件
        document.addEventListener('DOMContentLoaded', function() {
            const codingTaskCard = document.getElementById('coding-task-card');
            const codingModal = document.getElementById('coding-automation-modal');
            const closeModalBtn1 = document.getElementById('close-coding-modal');
            const closeModalBtn2 = document.getElementById('close-coding-modal-btn');
            
            // 打开模态框
            if (codingTaskCard && codingModal) {
                codingTaskCard.addEventListener('click', function(e) {
                    // 阻止事件冒泡，防止触发全局任务卡片的点击事件
                    e.stopPropagation();
                    codingModal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                });
            }
            
            // 关闭模态框
            function closeModal() {
                if (codingModal) {
                    codingModal.classList.add('hidden');
                    document.body.style.overflow = '';
                }
            }
            
            if (closeModalBtn1) closeModalBtn1.addEventListener('click', closeModal);
            if (closeModalBtn2) closeModalBtn2.addEventListener('click', closeModal);
            
            // 点击模态框背景关闭
            if (codingModal) {
                codingModal.addEventListener('click', function(e) {
                    if (e.target === codingModal) {
                        closeModal();
                    }
                });
            }
            
            // ESC键关闭模态框
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeModal();
                }
            });
        });
    </script>

    <!-- 系统测试任务弹窗 -->
    <div id="system-test-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <!-- 模态框头部 -->
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-medium text-text-primary">系统测试任务详情</h3>
                <button id="close-system-test-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="px-6 py-4">
                <!-- 任务基本信息 -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <h4 class="text-base font-medium text-text-primary">系统测试任务</h4>
                        <div class="flex space-x-2">
                            <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">ID: TASK-2024-100</span>
                            <span class="badge-priority-high">优先级: 高</span>
                        </div>
                    </div>
                    <div class="text-sm text-text-secondary mb-2">
                        <div class="flex flex-wrap gap-y-1">
                            <span class="mr-4">负责人: 赵六</span>
                            <span class="mr-4">进度: 50%</span>
                            <span>截止日期: 2024-08-20</span>
                        </div>
                    </div>
                    <p class="text-sm text-text-primary">
                        执行系统测试，验证新功能是否符合需求，确保系统稳定性和可靠性。
                    </p>
                </div>
                
                <!-- 模型版本信息 -->
                <div class="mb-6 bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-base font-medium text-text-primary mb-3">模型版本信息</h4>
                    <div class="space-y-2">
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">解决方案版本号:</span>
                            <span class="text-sm text-text-primary font-medium">Solution_900123_V1.0.1</span>
                        </div>
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">版本自动创建时间:</span>
                            <span class="text-sm text-text-primary">2025-10-09 12:12:12</span>
                        </div>
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">应用设计版本号:</span>
                            <span class="text-sm text-text-primary font-medium">AppDesign_900456_V0.0.7</span>
                        </div>
                        <div class="flex flex-wrap justify-between items-center">
                            <span class="text-sm text-text-secondary">版本自动创建时间:</span>
                            <span class="text-sm text-text-primary">2025-10-15 10:12:12</span>
                        </div>
                    </div>
                </div>
                
                <!-- 测试用例执行清单 -->
                <div class="mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-3">测试用例执行清单</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">测试用例ID</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">测试用例名称</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">测试类型</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">执行状态</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">执行时间</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">执行人</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-4 py-2 text-sm text-text-primary">TC-2024-001</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">用户登录功能测试</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">功能测试</td>
                                    <td class="px-4 py-2 text-sm"><span class="text-success">通过</span></td>
                                    <td class="px-4 py-2 text-sm text-text-secondary">2024-08-15 10:30</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">赵六</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2 text-sm text-text-primary">TC-2024-002</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">数据查询性能测试</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">性能测试</td>
                                    <td class="px-4 py-2 text-sm"><span class="text-success">通过</span></td>
                                    <td class="px-4 py-2 text-sm text-text-secondary">2024-08-15 11:15</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">赵六</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2 text-sm text-text-primary">TC-2024-003</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">权限管理测试</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">功能测试</td>
                                    <td class="px-4 py-2 text-sm"><span class="text-warning">部分通过</span></td>
                                    <td class="px-4 py-2 text-sm text-text-secondary">2024-08-15 14:20</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">赵六</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2 text-sm text-text-primary">TC-2024-004</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">异常情况下的数据一致性测试</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">稳定性测试</td>
                                    <td class="px-4 py-2 text-sm"><span class="text-danger">失败</span></td>
                                    <td class="px-4 py-2 text-sm text-text-secondary">2024-08-15 16:05</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">赵六</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2 text-sm text-text-primary">TC-2024-005</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">响应时间测试（高并发场景）</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">性能测试</td>
                                    <td class="px-4 py-2 text-sm"><span class="text-primary">进行中</span></td>
                                    <td class="px-4 py-2 text-sm text-text-secondary">2024-08-16 09:00</td>
                                    <td class="px-4 py-2 text-sm text-text-primary">赵六</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 业务模型覆盖数量（层级结构） -->
                <div class="mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-3">业务模型覆盖数量</h4>
                    <div class="space-y-4">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex justify-between items-center mb-2">
                                <h5 class="font-medium text-text-primary">业务领域</h5>
                                <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">3个</span>
                            </div>
                            <div class="pl-4 space-y-3">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">客户管理</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">订单处理</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">支付结算</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex justify-between items-center mb-2">
                                <h5 class="font-medium text-text-primary">价值流</h5>
                                <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">5个</span>
                            </div>
                            <div class="pl-4 space-y-3">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">客户获取</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">订单履行</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">售后服务</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">财务管理</span>
                                    <span class="text-xs text-success">已覆盖</span>
                                </div>
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm text-text-secondary">报表分析</span>
                                    <span class="text-xs text-warning">部分覆盖</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex justify-between items-center mb-2">
                                <h5 class="font-medium text-text-primary">活动</h5>
                                <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">12个</span>
                            </div>
                            <div class="pl-4 text-sm text-text-secondary">
                                <p>覆盖主要活动：客户注册、产品浏览、订单创建、支付处理、库存管理、物流跟踪等</p>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex justify-between items-center mb-2">
                                <h5 class="font-medium text-text-primary">任务</h5>
                                <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">28个</span>
                            </div>
                            <div class="pl-4 text-sm text-text-secondary">
                                <p>覆盖核心任务：用户认证、数据验证、业务逻辑处理、异常处理、报表生成等</p>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex justify-between items-center mb-2">
                                <h5 class="font-medium text-text-primary">步骤</h5>
                                <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">65个</span>
                            </div>
                            <div class="pl-4 text-sm text-text-secondary">
                                <p>覆盖关键步骤：数据输入验证、业务规则应用、系统集成调用、事务处理、日志记录等</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 需求整体变更涉及的各层级数量统计 -->
                <div class="mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-3">需求变更统计</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h5 class="text-sm text-blue-800 mb-1">业务领域变更</h5>
                            <p class="text-2xl font-bold text-blue-600">2个</p>
                            <p class="text-xs text-blue-500 mt-1">客户管理、订单处理</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg">
                            <h5 class="text-sm text-green-800 mb-1">价值流变更</h5>
                            <p class="text-2xl font-bold text-green-600">3个</p>
                            <p class="text-xs text-green-500 mt-1">客户获取、订单履行、财务管理</p>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-lg">
                            <h5 class="text-sm text-purple-800 mb-1">活动变更</h5>
                            <p class="text-2xl font-bold text-purple-600">8个</p>
                            <p class="text-xs text-purple-500 mt-1">主要涉及核心业务流程</p>
                        </div>
                        <div class="bg-orange-50 p-4 rounded-lg">
                            <h5 class="text-sm text-orange-800 mb-1">任务变更</h5>
                            <p class="text-2xl font-bold text-orange-600">15个</p>
                            <p class="text-xs text-orange-500 mt-1">包含新增和修改的任务</p>
                        </div>
                        <div class="bg-red-50 p-4 rounded-lg">
                            <h5 class="text-sm text-red-800 mb-1">步骤变更</h5>
                            <p class="text-2xl font-bold text-red-600">42个</p>
                            <p class="text-xs text-red-500 mt-1">涉及流程重组和优化</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="close-system-test-modal-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    关闭
                </button>
            </div>
        </div>
    </div>
    
    <!-- 系统测试任务卡片点击事件JavaScript -->
    <script>
        // 为系统测试任务添加点击事件
        document.addEventListener('DOMContentLoaded', function() {
            const systemTestTaskCard = document.getElementById('system-test-task-card');
            const systemTestModal = document.getElementById('system-test-modal');
            const closeModalBtn1 = document.getElementById('close-system-test-modal');
            const closeModalBtn2 = document.getElementById('close-system-test-modal-btn');
            
            // 打开模态框
            if (systemTestTaskCard && systemTestModal) {
                systemTestTaskCard.addEventListener('click', function(e) {
                    // 阻止事件冒泡，防止触发全局任务卡片的点击事件
                    e.stopPropagation();
                    systemTestModal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                });
            }
            
            // 关闭模态框
            function closeModal() {
                if (systemTestModal) {
                    systemTestModal.classList.add('hidden');
                    document.body.style.overflow = '';
                }
            }
            
            if (closeModalBtn1) closeModalBtn1.addEventListener('click', closeModal);
            if (closeModalBtn2) closeModalBtn2.addEventListener('click', closeModal);
            
            // 点击模态框背景关闭
            if (systemTestModal) {
                systemTestModal.addEventListener('click', function(e) {
                    if (e.target === systemTestModal) {
                        closeModal();
                    }
                });
            }
            
            // ESC键关闭模态框
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeModal();
                }
            });
        });
    </script>
</body>
</html>